<div class="lv-collapse-wrapper">
  <ng-container *ngFor="let collapsePanel of collapsePanels; let i = index">
    <div class="lv-collapse-panel" [ngClass]="{ 'lv-collapse-panel-expanded': collapsePanel.lvExpanded }">
      <div
        class="lv-collapse-header"
        [ngClass]="{
          'lv-collapse-header-loading': collapsePanel.lvLoading,
          'lv-collapse-header-extra': collapsePanel.lvExtra !== null
        }"
        [attr.disabled]="collapsePanel.lvDisabled ? '' : null"
        (click)="collapseClick(i, collapsePanel)"
      >
        <div class="lv-collapse-title">
          <ng-container *ngIf="!collapsePanel.lvLoading">
            <i
              *ngIf="collapsePanel.lvExpandedIcon === null; else iconContent"
              lv-icon="lv-icon-triangle-down"
              [ngClass]="{ down: collapsePanel.animationState === 'show' }"
            ></i>

            <ng-template #iconContent>
              <ng-container *ngIf="typeUtils.isRealString(collapsePanel.lvExpandedIcon)">
                <i lv-icon [lv-icon]="collapsePanel.lvExpandedIcon" [ngClass]="{ down: collapsePanel.lvExpanded }"></i>
              </ng-container>
              <ng-container *ngIf="typeUtils.isTemplateRef(collapsePanel.lvExpandedIcon)">
                <ng-container
                  *ngTemplateOutlet="collapsePanel.lvExpandedIcon; context: { $implicit: collapsePanel.lvExpanded }"
                ></ng-container>
              </ng-container>
            </ng-template>
          </ng-container>
          <ng-container *ngIf="collapsePanel.lvLoading">
            <img src="{{ assetsPrefixPath }}assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" />
          </ng-container>

          <span *ngIf="typeUtils.isRealString(collapsePanel.lvTitle)" class="lv-collapse-title-text" lv-overflow>{{
            collapsePanel.lvTitle
          }}</span>
          <span *ngIf="typeUtils.isTemplateRef(collapsePanel.lvTitle)" class="lv-collapse-title-text">
            <ng-container [ngTemplateOutlet]="collapsePanel.lvTitle"></ng-container>
          </span>
          <div *ngIf="collapsePanel.lvExtra !== null" class="lv-collapse-extra">
            <ng-container *ngIf="typeUtils.isRealString(collapsePanel.lvExtra)">{{
              collapsePanel.lvExtra
            }}</ng-container>
            <ng-container
              *ngIf="typeUtils.isTemplateRef(collapsePanel.lvExtra)"
              [ngTemplateOutlet]="collapsePanel.lvExtra"
            ></ng-container>
          </div>
        </div>
      </div>
      <div
        class="lv-collapse-body"
        *ngIf="collapsePanel.collapsePanelShow"
        [ngStyle]="{ overflow: collapsePanel.overflow }"
        [@showPanel]="collapsePanel.animationState"
        (@showPanel.start)="collapsePanel.onAnimationStart()"
        (@showPanel.done)="collapsePanel.onAnimationDone($event)"
      >
        <div class="lv-collapse-content" [ngClass]="lvPanelClass">
          <ng-container [ngTemplateOutlet]="collapsePanel.lazyContent || collapsePanel.content"></ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</div>
